<template>
  <div>
    <div style="">
      <a-skeleton :loading="timelineLoading" active>
        <div style="width: 100%;margin: 10px auto;">
          <a-button type="dashed" block v-has="'customer:addLog'" @click="addLog()">
            <a-icon type="plus"/>
            添加日志
          </a-button>
        </div>
        <a-card style="width:100%;margin: 10px auto;" v-for="(item,index) in logDataSource" :key="index">
          <a-row>
            <a-col :span="24" style="padding: 0px;margin: 0px">
              <div style="display:flex;justify-content:space-between;">
                <div>
                  <img :src="item.avatar" style="width:30px;height:30px;margin-right:10px;border-radius:50%"/>
                  <span>{{ item.createBy }}</span>
                </div>
                <div style="display:flex;align-items:center;">
                  <span>是否对业主展示:</span>
                  <a-switch size="small" 
                    v-model="item.isShow == 1 ? true : false"
                    @change="changeShowComment($event,item)"
                    style="margin-right: 10px;">
                    <a-icon slot="checkedChildren" type="check"/>
                    <a-icon slot="unCheckedChildren" type="close"/>
                  </a-switch>
                  <a-popconfirm title="确定删除该日志吗?" @confirm.stop="() => deleteLog(item.id)">
                    <a-icon type="delete"/>
                  </a-popconfirm>
                  
                </div>
              </div>
              <span style="display:inline-block;color: darkgray;">{{item.createTime}}</span><br>
              <div style="margin-top: 7px;margin-bottom: 7px">{{item.content}}</div>
              <div>{{ item.contentProgress }}</div>
              <div v-if="item.imageArr != null && item.uploadResourceType == 1" style="margin-top: 5px">
                <img style="width: 100px;height: 100px;margin-right: 10px;margin-bottom: 10px" @click="handlePreview(item.imageArr, imgIndex)"
                     :src="getAvatarView(img)" v-for="(img,imgIndex) in item.imageArr">
              </div>
              <div v-if="item.uploadResourceType == 2" style="margin-top: 5px">
                <video style="width: 25%;height: 25%;margin-right: 10px" autoplay="autoplay" loop="-1"  :src="video" v-for="(video,imgIndex) in item.imageArr" @click="play(video)"></video>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div>
                <div style="float: right" @click="showComment(item.id)">
                  <a>
                    <a-icon type="star"/>
                    <span style="padding-left: 2px;padding-right: 2px">评论</span>
                    <span v-if="item.commentCount >=1">({{item.commentCount}})</span>
                  </a>
                </div>
                <!--<a-icon type="eye" style="float: right;font-size: 16px;margin-right: 10px" v-show="item.isShow == 1"/>
                <a-icon type="eye-invisible" style="float: right;font-size: 16px;margin-right: 10px" v-show="item.isShow == 0"/>-->
              </div>
              <div style="width: 100%;margin-top: 25px;margin-bottom: 7px;height: 1px;background: lightgrey"></div>
              <div>
                <a-icon type="unordered-list" style="margin-right: 10px"/>
                {{item.progressItemName}}
              </div>
              <div style="margin-top: 7px;width: 100%;height: 1px;background: lightgrey"
                   v-show="item.id == currentLogId && showCommentFlag"></div>
            </a-col>
          </a-row>
          <a-row>
            <!--评论部分内容，需要通过点击评论显示-->
            <div v-show="item.id == currentLogId && showCommentFlag">
              <div style="margin-top:20px;">
                <a-row>
                  <a-col :span="21">
                    <a-input v-model:value="content" placeholder="请输入内容"/>
                  </a-col>
                  <a-col :span="3">
                    <a-button type="primary" @click="saveComment(item.id)">发布</a-button>
                  </a-col>
                </a-row>
                <a-row style="margin-top:20px;" v-for="(comment,index1) in item.commentList" :key="index1">
                  <a-col :span="24">
                    <div style="display:flex;justify-content:space-between;">
                      <div>
                        <img
                          :src="comment.avatar"
                          style="height:30px;width:30px;margin-right:10px;border-radius: 50%"/>
                        <span>{{comment.createBy}}</span>
                      </div>
                      <div>
                        <a-popconfirm title="确定删除此条评论吗?" v-show="comment.createId === currentUser.id"
                          @confirm.stop="() => deleteComment(comment.id)">
                          <a>
                            <a-icon type="close"/>
                          </a>
                        </a-popconfirm>
                      </div>
                    </div>

                    <div style="color: darkgray;">{{comment.createTime}}</div>
                    <div style="margin-top: 5px">{{comment.commentContent}}</div>
                    <div style="float: right;margin-top: 5px;width: 100%;height: 1px;background: lightgrey"></div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-row>
        </a-card>
        <a-empty v-if="logDataSource.length == 0" style="margin-top: 50px"/>
      </a-skeleton>
    </div>
    <progressLogAddModal ref="progressLogAddModal" @ok="modalFormOk"></progressLogAddModal>
  </div>
</template>
<script>
  import { deleteAction, getAction, postAction, putAction, getFileAccessHttpUrl } from '@api/manage'
  import progressLogAddModal from './modules/progressLogAddModal'
  import Vue from 'vue'
  import { USER_INFO } from '@/store/mutation-types'
  import { ImagePreview } from 'vant';
  export default {
    name: 'logDetailModal',
    components: {
      progressLogAddModal
    },
    props: {
      customerId: {
        required: true,
        default: 0
      },
    },
    data() {
      return {
        currentItem: {},

        timelineLoading: false,
        title: '',
        model: {},
        width: 800,
        visible: false,
        disableSubmit: false,
        currentCustomerId: 0,
        fullscreen: true,
        switchFullscreen: true,
        currentLogId: 0,    //当前点击评论传过来的日志id，用于判断是否显示，以及用于添加评论，删除评论之后刷新评论数据
        showCommentFlag: false,
        commFlag: false,
        content: '',   //评论的内容
        logDataSource: [], //存放日志数据
        commentDataSource: [],  //存放评论的数据
        currentUser: {},
        url: {
          list: '/ghConstructLog/queryListByCustomerId',
          commentAdd: '/ghConstructLogComment/add',
          commentDelete: '/ghConstructLogComment/delete',
          logEdit: '/ghConstructLog/edit',
          logAdd: '/ghConstructLog/add',
          logDelete: '/ghConstructLog/delete'
        },
        menuVisible: false,
        menuStyle: {
          position: 'absolute',
          top: '0',
          left: '0',
          border: '1px solid #eee'
        },
      }
    },
    created() {
      this.initLogData()
    },
    methods: {
      async handlePreview(pathList, i) {
        ImagePreview({
          images: pathList,
          startPosition: i,
          closeable: true,
        })
      },
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      //删除日志
      deleteLog(logId) {
        deleteAction(this.url.logDelete, {
          id: logId
        }).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.initLogData()
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      //添加日志
      addLog() {
        this.$refs.progressLogAddModal.showProgressItemFlag = true
        this.$refs.progressLogAddModal.customerId = this.customerId
        this.$refs.progressLogAddModal.title = '新增施工日志'
        //this.$refs.progressLogAddModal.phone = this.record.phone
        this.$refs.progressLogAddModal.add(this.customerId)
      },
      //更改业主显示状态
      changeShowComment(event, item) {
        let params = {}
        params.id = item.id
        if (event) {
          params.isShow = 1
        } else {
          params.isShow = 0
        }
        putAction(this.url.logEdit, params).then((res) => {
          if (res.success) {
            this.initLogData()
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
      },

      showMenu(event, item) {
        this.currentItem = item
        this.menuVisible = true
        this.menuStyle.top = event.clientY + 'px'
        this.menuStyle.left = event.clientX + 'px'
        document.body.addEventListener('click', this.bodyClick)
      },
      //左键点击其他地方关闭菜单
      bodyClick() {
        this.menuVisible = false
        document.body.removeEventListener('click', this.bodyClick)
      },
      //发布评论
      saveComment(logId) {
        if (this.content == '' || this.content == null) {
          this.$message.error('评论内容不能为空')
          return
        }
        let params = {}
        params.logId = logId
        params.commentContent = this.content
        postAction(this.url.commentAdd, params).then((res) => {
          if (res.success) {
            this.initLogData()
            this.$message.success(res.message)
            this.content = ''
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      //删除评论
      deleteComment(commentId) {
        deleteAction(this.url.commentDelete, {
          id: commentId
        }).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.initLogData()
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      //显示评论
      showComment(logId) {
        if (this.currentLogId == logId) {
          if (this.showCommentFlag == true) {
            this.showCommentFlag = false
          } else {
            this.showCommentFlag = true
          }
        } else if (this.currentLogId != logId) {
          this.currentLogId = logId
          this.showCommentFlag = true
        }
      },
      initLogData() {
        this.timelineLoading = true;
        this.currentUser = Vue.ls.get(USER_INFO)
        getAction(this.url.list, {
          customerId: this.customerId
        }).then((res) => {
          if (res.success) {
            this.timelineLoading = false;
            this.logDataSource = res.result;
          }
        })
      },
      modalFormOk() {
        this.initLogData()
      },
      edit(record) {
        this.model = record
        this.visible = true
        this.initLogData()
      },
      close() {
        this.$emit('close')
        this.dataSource = []
        this.visible = false
      },
      handleOk() {
        this.$refs.realForm.submitForm()
      },
      submitCallback() {
        this.$emit('ok')
        this.dataSource = []
        this.visible = false
      },
      handleCancel() {
        this.close()
      },
      play(videoUrl){
        window.open(videoUrl)
      }
    }
  }
</script>
<style scoped>

</style>